
<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
  <title>layer弹层组件移动版使用教程</title>
  <link href="css/demo.css" type="text/css" rel="stylesheet">
  <link href="css/layer.css" type="text/css" rel="stylesheet">  
</head>
<body>
  <header>
    <div class="main">
     <h1>Layer For Mobile<code class="vel"></code></h1> 
    </div>
  </header>
  <section class="main">
    <p>为了精确体验，您可通过Chrome设备模式浏览。或通过</p>
    <h2>小试牛刀</h2>
    <p class="demo" id="trys">
      <a href="javascript:;">提示框</a>
      <a href="javascript:;">信息框</a>
      <a href="javascript:;">询问框</a>
      <a href="javascript:;">页面层</a>
      <a href="javascript:;">加载条</a>
    </p>
  </section>
  <section class="main">
    <a href="javascript:;" id="seecodes" class="button" style="background: #FEAE1B;">查看小试牛刀演示代码
    </a>
    <pre id="trycode" style="margin-top: 10px; display: none;">
      /** 以下是小试牛刀的调用代码（此处不展示事件绑定）*/
      //提示框
      layer.open({
      content: '您好',
      time: 2 //2秒后自动关闭
      });
      //信息框
      layer.open({
      title: '信息',
      content: '移动版和PC版不能同时使用在同一页面。'
      });
      //询问框
      layer.open({
      title: '提示',
      content: '您确定要刷新一下本页面吗？',
      btn: ['嗯', '不要'],
      yes: function(index){
      location.reload();
      layer.close(index);
      }
      });
      //页面层
      layer.open({
      type: 1,
      content: '可传入任何内容，支持html。一般用于手机页面中',
      anim: 0,
      style: 'position:fixed; bottom:0; left:0; width:100%; height:150px; padding:10px 0; border:none;'
      });
      //加载层
      layer.open({type: 2});
      </pre>
    <h2>注意事项
    </h2>
    <div class="block">
      <ol>
       <li>layer mobile不对iframe提供支持。</li>
      </ol>
    </div>
    <h2 style="padding: 10px 0 5px;">功能演示</h2>
    <p style="margin-top: 10px;"><strong>普通信息框，并设置2秒自动关闭：</strong></p>
    <pre>
      <span id="demo1">layer.open({
      content: '通过style设置你想要的样式',
      style: 'background-color:#09C1FF; color:#fff; border:none;',
      time: 2
      });
      </span>
      <a href="javascript:;"  class="button" onclick="new Function(demo1.innerHTML)();">运行
      </a>
      </pre>
    <p><strong>提示框，并自定义标题风格：</strong></p>
    <pre>
      <span id="demo2a">layer.open({
      title: [
      '我是标题',
      'background-color:#8DCE16; color:#fff;'
      ],
      content: '标题风格任你定义。。'
      });
      </span>
      <a href="javascript:;"  class="button" onclick="new Function(demo2a.innerHTML)();">运行
      </a>
    </pre>
    <p><strong>提示框，并显示1个按钮：</strong></p>
    <pre>
      <span id="demo2">layer.open({
      content: '通过style设置你想要的样式',
      btn: ['OK']
      });
      </span>
      <a href="javascript:;"  class="button"onclick="new Function(demo2.innerHTML)();">运行
      </a>
    </pre>
    <p><strong>询问框，并显示2个按钮，不允许点遮罩关闭：</strong></p>
    <pre>
      <span id="demo3">layer.open({
      content: '你是想确认呢，还是想取消呢？',
      btn: ['确认', '取消'],
      shadeClose: false,
      yes: function(){
      layer.open({content: '你点了确认', time: 1});
      }, no: function(){
      layer.open({content: '你选择了取消', time: 1});
      }
      });
      </span>
      <a href="javascript:;"  class="button" onclick="new Function(demo3.innerHTML)();">运行
      </a>
    </pre>
    <p><strong>页面层，全屏：</strong></p>
    <pre>
      <span id="demo5">var pageii = layer.open({
      type: 1,
      content: html,
      style: 'position:fixed; left:0; top:0; width:100%; height:100%; border:none;'
      });
      </span>
      <a href="javascript:;"  class="button" onclick="new Function('var html = demo5a.value;'+demo5.innerHTML)();">运行
      </a>
    </pre>
    <textarea id="demo5a" style="display: none;">
			<div style="padding:20px;">
					Hi，欢迎您体验移动版的layer弹层组件，这看上去是一个新页面的样子。。。
					<p>此时你一定迫不及待地想关闭掉它，你只需要执行这么一段代码：</p>
			    <pre>
            //elem为您获取的元素对象
            elem.addEventListener('click', function(){
            layer.close(pagei); //pagei为你调用layer时返回的索引
            //还可以通过layer.closeAll(); 它将关闭所有层  
            })
          </pre>
					<a href="javascript:;"class="button"onclick="layer.closeAll(); layer.open({content:'世界恢复原样 →_→', time:2});  ">我要关闭！！</a>
			</div>
		</textarea>
    <h2>注意事项</h2>
    <div class="block">
      <ol>
        <li>layer mobile不对iframe提供支持。</li>
      </ol>
    </div>
  </section>
  <script type="text/javascript"src="http://img.lfszkyy.com/scripts/jquery/jquery-1.11.2.min.js"></script>
  <script src="js/layer.js"></script>
  <script src="js/demo.js"></script>
</body>
</html>
